<template>
    <div class="course-select-home-page">
        <el-card class="relative">
            <el-tabs v-model="activeName">
                <el-tab-pane label="角色" name="Course.Theme"></el-tab-pane>
                <el-tab-pane label="主题" name="Course.Content"></el-tab-pane>
                <el-tab-pane label="主题分类" name="Course.Ability"></el-tab-pane>
                <el-tab-pane label="课程库" name="Course.Library"></el-tab-pane>
            </el-tabs>
            <router-link v-if="my && !my.company_id" class="course" to="/course-selection">选课中心预览</router-link>
        </el-card>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { Tabs, TabPane } from 'element-ui';
import {mapState} from 'vuex';

export default {
    components: {
        ElTabs: Tabs,
        ElTabPane: TabPane,
    },
    data() {
        return {
            activeName: 'Course.Theme',
        };
    },
    computed: {
        ...mapState([
            'my',
        ]),
    },
    watch: {
        activeName(val) {
            this.$router.push({name: val});
        },
    },
    methods: {
        onSave() {

        },
    },
    mounted() {
        this.activeName = this.$route.name;
    },
};
</script>

<style lang="scss">
.course-select-home-page {
    .course {
        position: absolute;
        right: 0;
        top: calc(50% - 5px);
        transform: translateY(-50%);
    }
}

</style>
